<style scoped lang="scss">
.card{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5px;
    >div{
        width: 33%;
        height: 120px;
        background-color: #fff;
        margin: 5px;
        // align-items: center;
        text-align: center;
        border-radius: 15px;
        dl{
            p{
                font-size: 12px;
                color: #ccc;
                line-height: 30px;
            }
            img{
                width: 70px;
                height: 65px;
            }
        }
    }
}
</style>
<template>
    <div class="card">
        <div>
            <dl @click="$router.push('/reservation')">
                <dt><img v-error src="../../assets/card1.png" alt=""></dt>
                <dd>
                    <h3>预约挂号</h3>
                    <p>30W+专家入驻</p>
                </dd>
            </dl>
        </div>
        <div>
            <dl>
                <dt><img v-error src="../../assets/card2.png" alt=""></dt>
                <dd>
                    <h3>极速问诊</h3>
                    <p>平均3分钟接诊</p>
                </dd>
            </dl>
        </div>
        <div>
            <dl @click="$router.push('/many')">
                <dt><img v-error src="../../assets/card3.png" alt=""></dt>
                <dd>
                    <h3>复诊开方</h3>
                    <p>慢病续方送到家</p>
                </dd>
            </dl>
        </div>
    </div>
</template>

<script setup lang="ts">
// import { ref } from 'vue'

</script>